<template>
  <el-card class="user-profile-card">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>
    
    <el-form :model="userInfo" :rules="rules" ref="userInfoForm" label-width="120px">
      <el-upload class="avatar-uploader" action="http://localhost:8989/buy/customer/avatarImgUpload"
      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="userInfo.imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
      <el-form-item label="用户名称">
        <el-input v-model="userInfo.userName" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="前台用户账号">
        <el-input v-model="userInfo.userAccount" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="前台用户密码">
        <el-input v-model="userInfo.userPassword" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="userInfo.realName" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="userInfo.sex" :disabled="!isEditing">
          <el-radio  label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="userInfo.birth" :disabled="!isEditing" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="userInfo.userPhone" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="省份">
        <el-input v-model="userInfo.userProvince" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="市">
        <el-input v-model="userInfo.userCity" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="userInfo.userAddr" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="userInfo.userCard" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="用户余额">
        <el-input v-model="userInfo.userBalance" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="商户状态">
        <el-select v-model="userInfo.userMechant" placeholder="请选择">
          <el-option label="普通用户" :value="0">普通用户 </el-option>
          <el-option label="商户" :value="1">商户 </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商状态">
        <el-select v-model="userInfo.userSupplier" placeholder="请选择">
          <el-option label="普通用户" :value=0>普通用户 </el-option>
          <el-option label="供应商" :value=1 >供应商 </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select v-model="userInfo.userStatus" placeholder="请选择">
          <el-option label="已注销" :value="0">已注销 </el-option>
          <el-option label="未注销" :value="1">未注销 </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="editInfo" :disabled="!isEditing">保存</el-button>
        <el-button type="warning" plain @click="saveInfo" :disabled="!isEditing">修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      userInfo: {
     
      },
      rules: {
        // 验证规则  
      },
      isEditing: true,
      customerId:sessionStorage.getItem('token'),
    };
  },
   created(){
    this.handleClick();
  },
  methods: {
    async handleClick() {  
      try {  
        const res =  await this.$http.post(`/buy/customer/getById/2`); 
        // const year=res.data.birth.year
        // const monthValue=res.data.birth.monthValue
        // const dayOfMonth=res.data.birth.dayOfMonth 
        // const date=year+"-"+monthValue+"-"+dayOfMonth
   
        this.userInfo=res.data;  
        // this.userInfo.birth=date;
        sessionStorage.setItem('id',res.data.id)
      } catch (error) {  
        console.error('Error fetching data:', error);  
      }  
    }, 
    
    async saveInfo() {  
      console.log(this.userInfo)
      try {  
        const res =  await this.$http.post(`/buy/customer/updateUserInfo`,this.userInfo); 
       console.log(res)
       if(res!=null){
        this.$message.success("修改成功！！！")
        this.handleClick();
       }
      } catch (error) {  
        console.error('Error fetching data:', error);  
      }  
    },
    //头像成功上传的回调
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.imageUrl = res;
      // this.userInfo.avatarImg = this.imageUrl
    },
    //上传之前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    editInfo() {
      this.isEditing = true;
    },
    async created() {
      try {
        // 假设我们有一个 API 路径来获取用户信息  
        const res = await this.$http.post(`/buy/customer/selectCustomer`, this.customer);
        // 假设后端返回的数据结构是 { user_name: 'John Doe', ... }  
        this.userInfo = response.data; // 直接将响应数据赋给 userInfo  
      } catch (error) {
        console.error('Error fetching user info:', error);
        // 处理错误情况，如显示错误消息等  
      }
    },
  },
};  
</script>

<style scoped>
.user-profile-card {
  background-image: url('@/assets/imgs/main/image1.png'); 
  background-repeat: no-repeat;  
  background-size: cover;  
}
.el-avatar {
  vertical-align: middle;
  margin-right: 10px;
}

.personal-info-card {
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.personal-info-card .el-card__header {
  padding: 10px 20px;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  background-color: #f5f7fa;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.personal-info-card .el-form-item__label {
  color: #606266;
}

.personal-info-card .el-input__inner,
.personal-info-card .el-select__input {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  color: #606266;
}

.personal-info-card .el-button {
  margin-top: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>